﻿<div id="content" class="mdl-grid">
    <div class="p-section">
        <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
            <div class="mdl-tabs__tab-bar">
                <a href="#about-panel" class="mdl-tabs__tab">新品推荐</a>
                <a href="#members-panel" class="mdl-tabs__tab is-active">热销产品</a>
                <a href="#albums-panel" class="mdl-tabs__tab">轮播图管理</a>
            </div>

            <!-- 新品推荐管理 -->
            <div class="mdl-tabs__panel" id="about-panel">
                <form action="" method="post" enctype="multipart/form-data" class="mdl-grid">
                    <div class="mdl-cell mdl-cell--4-col">
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input" type="text" id="name" value="Product Name">
                            <label class="mdl-textfield__label" for="name">产品名称</label>
                        </div>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="cost" value="150">
                            <label class="mdl-textfield__label" for="cost">价格</label>
                            <span class="mdl-textfield__error">请输入数字</span>
                        </div>
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                            <textarea class="mdl-textfield__input" type="text" rows="4" id="summary">暂无产品简介……</textarea>
                            <label class="mdl-textfield__label" for="summary">产品简介</label>
                        </div>
                    </div>
                    <div class="mdl-cell mdl-cell--4-col" style="text-align: right">
                        <img src="/avBackend/src/images/test.jpg" width="250">
                    </div>
                    <div class="mdl-cell mdl-cell--4-col">
                        <!-- webupload -->
                    </div>
                </form>
            </div>

            <!-- 热销产品内容管理 -->
            <div class="mdl-tabs__panel is-active" id="members-panel">
                <div class="announcements">
                    <b>注意事项：</b>
                    <p class="announcements-detail">
                        1.首要考虑年龄因素。<br>
                        2.保费的支出，应为年收入的10%—15%，保额设定为年收入的6-10倍，为宜。但应具体问题具体分析。<br>
                        3.是否有社保，请关注其中得到医保和养老。
                    </p>
                </div>
                <div class="table-bar">
                    <a href="javascript:void(0)" id="hotAddBtn" class="button button-small button-primary">添加</a>
                    <a href="javascript:void(0)" id="hotEditBtn" class="button button-small button-royal">编辑</a>
                    <a href="javascript:void(0)" id="hotDeleBtn" class="button button-small button-caution ">删除</a>
                    <a href="javascript:void(0)" id="hotSaveBtn" class="button button-small button-action">保存</a>
                </div>
                <div id="hotdealinfo"></div>
            </div>

            <!-- 轮播图管理 -->
            <div class="mdl-tabs__panel" id="albums-panel">
                <div class="mdl-grid">
                    <div class="mdl-cell mdl-cell--4-col">
                        <div class="demo-card-image mdl-card mdl-shadow--2dp"
                             style="height: 176px; background: url('/avBackend/src/images/slider1.jpg') center;">
                            <div class="mdl-card__title mdl-card--expand"></div>
                            <div class="mdl-card__actions">
                                <span class="demo-card-image__filename">首页轮播图-1</span>
                                <a href="####" class="img-edit" id="tt1">修改</a>
                                <div class="mdl-tooltip" data-mdl-for="tt1">
                                    Follow
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mdl-cell mdl-cell--4-col">
                        <div class="demo-card-image mdl-card mdl-shadow--2dp"
                             style="height: 176px; background: url('/avBackend/src/images/slider2.jpg') center;">
                            <div class="mdl-card__title mdl-card--expand"></div>
                            <div class="mdl-card__actions">
                                <span class="demo-card-image__filename">首页轮播图-2</span>
                                <a href="####" class="img-edit">修改</a>
                            </div>
                        </div>
                    </div>
                    <div class="mdl-cell mdl-cell--4-col">
                        <div class="demo-card-image mdl-card mdl-shadow--2dp"
                             style="height: 176px; background: url('/avBackend/src/images/slider3.jpg') center;">
                            <div class="mdl-card__title mdl-card--expand"></div>
                            <div class="mdl-card__actions">
                                <span class="demo-card-image__filename">首页轮播图-3</span>
                                <a href="####" class="img-edit">修改</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        componentHandler.upgradeAllRegistered()  // 因为路由引入页面的关系，需要重注册material框架的事件

        /**
         * Hot Deal dataTable
         */
        var hotdealInfoTable = $('#hotdealinfo'),
            $hotAddBtn       = $('#hotAddBtn'),
            $hotEditBtn      = $('#hotEditBtn'),
            $hotDeleBtn      = $('#hotDeleBtn'),
            $hotSaveBtn      = $('#hotSaveBtn'),
            url = '/avBackend/src/js/hotDealJson.txt',
            source ={
                dataType: "json",
                dataFields: [       // 对应请求下来的json数据格式，并设置数据格式
                    { name: 'id', type: 'int' },
                    { name: 'calories', type: 'string' },
                    { name: 'title', type: 'string' },
                    { name: 'cost', type: 'string' },
                    { name: 'introduce', type: 'string' },
                    { name: 'url', type: 'string' },
                    { name: 'imgUrl', type: 'string' }
                ],
                id: 'id',
                url: url
            },
            dataAdapter = new $.jqx.dataAdapter(source)

        hotdealInfoTable.jqxDataTable({
            width: '100%',
            theme: 'metro',
            editable: true,
            source: dataAdapter,
            scrollBarSize: 5,
            pageable: true,
            pageSize: 3,
            pagerHeight: 30,
            columnsHeight: 40,
            columns: [
                { text: '序号', dataField: 'id', editable: false },
                { text: '产品名称', dataField: 'title' },
                { text: '价格', dataField: 'cost' },
                {
                    text: '产品图片', dataField: 'imgUrl',
                    cellsRenderer: function (row, column, value, rowData) {
                        var img = '<img width="60" height="60" src="'+ value +'"/>'
                        return img
                    }
                },
                { text: '产品详情链接', dataField: 'url' },
                { text: '产品简介', dataField: 'introduce' }
            ]
        })

        var rowIndex = null
        hotdealInfoTable.on('rowSelect', function (event) {
            var args = event.args
            rowIndex = args.index
        })

        // 添加行
        $hotAddBtn.on('click', function (event) {
            event.preventDefault()
            hotdealInfoTable.jqxDataTable('addRow', null, {},'first')
            hotdealInfoTable.jqxDataTable('clearSelection')
            hotdealInfoTable.jqxDataTable('beginRowEdit', 0)
        })

        // 编辑行
        $hotEditBtn.on('click', function (event) {
            event.preventDefault()
            hotdealInfoTable.jqxDataTable('beginRowEdit', rowIndex)
        })

        // 删除行
        $hotDeleBtn.on('click', function (event) {
            event.preventDefault()
            hotdealInfoTable.jqxDataTable('deleteRow', rowIndex)
        })

        // 保存修改
        $hotSaveBtn.on('click',function (event) {
            hotdealInfoTable.jqxDataTable('endRowEdit', rowIndex, false)
        })
    })
</script>